
@extends('layouts._main')

@section('title','购买礼品卡')

@section('css')
    <style>

        .body{
            font-size: 14px;
        }

        .recharge_main{
            padding: 10px 15px;
        }

        .bind_card{
            box-sizing: border-box;
            width: 80%;
            margin: 0 auto;
            height: 128px;
            border-radius: 15px;
            margin-top: 10px;
            position: relative;
            box-shadow: 0px 2px 1px 0px #d0d0d0;
        }

        .cash_input_div{
            font-size: 30px;
        }
        .input_p{
            margin: 15px 0;
        }
        .weui-cell__bd p{
            font-size: 12px;
        }
        .weui-cells_checkbox .weui-icon-checked:before {
            color: #D79705;
            font-size: 16px;
        }
        .weui-cells_checkbox .weui-check:checked+.weui-icon-checked:before {
            content: '\EA06';
            color: #D79705;
        }
        .weui-cell {
            padding: 5px 0;

        }
        .weui-cells:after, .weui-cells:before,.weui-cell:before {
            content: none;
        }
        .weui-cells{
            font-size: 14px;
            background-color: #f0eff6;
        }
        .exchange_button{
            width: 85%;
            margin-top: 15px;
            border: none;
            background-color: #d79705;
            color: #fff;
            padding: 8px;
            border-radius: 8px;
        }
        .recharge_balance_bottom{
            padding-top: 10px;
            border-top: 1px solid #ddd;
            text-align: center;
        }
        .nav_bar{
            background-color: #fff;
            /*box-shadow: 0px 2px 12px 1px #D0D0D0;*/
            padding: 10px 15px;
            text-align: center;
            border-bottom: 1px solid #D0D0D0;
            color: #D79705;
        }
        .nav_bar>.nav_back {
            background: url('/images/version1/icon_bar_back.png') no-repeat;
            background-size: 20px 20px;
            display: inline-block;
            float: left;
        }
        .weui-label_ali{
            background: url('/images/version1/icon_alipay.png') no-repeat;
        }
        .weui-label_wx{
            background: url('/images/version1/icon_wxpay.png') no-repeat;
        }
        .weui-label_balance{
            background: url('/images/version1/icon_share.png') no-repeat;
        }
        .weui-check__label {
            background-size: 30px 100%;
            padding-left: 35px;
            margin-top: 10px;
        }
        .graid{
            background-color: #eee;
            width: 100%;
            height: 100px;
            padding-top: 10px;
            margin-bottom: 10%;
        }
        /*#D79705*/
    </style>
@endsection

@section('container')
    <div class="body">
        <div class="nav_bar">
            <div class="nav_back"></div>
            购买礼品卡
        </div>

        <div class="graid">
            <div class="bind_card" style="background: url('/images/version1/gift1_bkg.jpg') no-repeat;background-size: 100% 100%"></div>
        </div>
        <div class="recharge_main">



            <p class="input_p">礼品卡金额</p>
            <div class="cash_input_div">￥{{ $gift_card->cash }}</div>

            <div class="weui-cells weui-cells_checkbox">
                <p>选择支付方式</p>
                <label class="weui-cell weui-check__label weui-label_ali" for="s11">

                    <div class="weui-cell__bd">
                        <p>支付宝支付</p>
                    </div>
                    <div class="weui-cell__hd">
                        <input type="radio" class="weui-check" name="payway" value="alipay" id="s11" checked="checked">
                        <i class="weui-icon-checked"></i>
                    </div>
                </label>
                <label class="weui-cell weui-check__label weui-label_wx" for="s12">

                    <div class="weui-cell__bd">
                        <p>微信支付</p>
                    </div>
                    <div class="weui-cell__hd">
                        <input type="radio" name="payway" class="weui-check" value="wxpay" id="s12">
                        <i class="weui-icon-checked"></i>
                    </div>
                </label>

                {{--@if($can_user_balance)
                    <label class="weui-cell weui-check__label weui-label_balance" for="s13">

                        <div class="weui-cell__bd">
                            <p>余额支付</p>
                        </div>
                        <div class="weui-cell__hd">
                            <input type="radio" name="payway" class="weui-check" value="balancepay" id="s13">
                            <i class="weui-icon-checked"></i>
                        </div>
                    </label>
                @endif--}}
            </div>
        </div>

        <div class="recharge_balance_bottom">
            <p>需支付 ￥<span class="need_pay">{{ $gift_card->cash }}</span></p>

            <button class="exchange_button" >立即支付</button>
        </div>
    </div>
@endsection

@section('js')

    <script type="text/javascript" class="navbar js_show">
        $(function(){

            $('.bind_card').css('height',$('.bind_card').width()*1*0.5+12+'px');
            $('.graid').css('height',($('.bind_card').width()*1*0.5+12)*0.5+10+'px');
            $('.graid').css('margin-bottom',($('.bind_card').width()*1*0.5+12)/1.5+'px');

            //立即支付
            $('.exchange_button').click(function () {
                // _this.addClass('loadding');
                var _this = $(this);
                if(_this.hasClass('loadding')) return false;
                _this.addClass('loadding');

                $.ajax({
                    url:'/ajax/pay/gift-card',
                    data:{'_token':window.laravel_csrf_token,'id':"{{ $gift_card->id_gift }}",'pay_type':$('input[name=payway]:checked').val()},
                    type:'post',
                    dataType:'json',
                    success:function(res){

                        if(res.code==4003){
                            showMsg(res.msg);
                            return false;
                        }
                        showMsg(res.msg);
                        _this.removeClass('loadding');
                    }
                });

            });
        });
    </script>
@endsection

